<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let router = useRouter()//待解释？？
let booData = ref(null)
axios.get("http://localhost:8080/api/books",{
  headers:{
    "Authorization":"Bearer "+localStorage.getItem("token")
  }
}).then((res)=>{
    // console.log(res)
    booData.value = res.data

})
function  handleDetailClick(data:any){
  // console.log(data.row.id,data.row.name)
  // let res = await axios.get("http://localhost:8080/api/books/"+data.row.id)
  // res.data
  
  
  router.push("/details")
}
</script>

<template>
  
<h1>书籍管理系统</h1>

  <el-table :data="booData" stripe style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="name" label="书名" width="180" />
    <el-table-column prop="type" label="类型" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="data">
        <el-button type="primary" size="small" @click="handleDetailClick(data)">详情</el-button>
        <el-button type="primary" size="small">编辑</el-button>
        <el-button type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>



</template>

<style scoped>

</style>